<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;

var dateList=[];
var valueList=[];
option = {
    // Make gradient line here
    visualMap: [{
        show: false,
        type: 'continuous',
        seriesIndex: 0,
        min: 0,
        max: 400
    }, {
        show: false,
        type: 'continuous',
        seriesIndex: 1,
        dimension: 0,
        min: 0,
        max: 400
    }],
    title: [{
        left: 'center',
        text: '服务器A心跳监控'
    }, {
        top: '55%',
        left: 'center',
        text: '服务器B心跳监控'
    }],
    tooltip: {
        trigger: 'axis'
    },
    xAxis: [{
        data: dateList
    }, {
        data: dateList,
        gridIndex: 1
    }],
    yAxis: [{
        name: "Ping",

        splitLine: {
            show: true,

        }
    }, {
        name: "Ping",
        splitLine: {show: true},
        gridIndex: 1
    }],
    grid: [{
        bottom: '60%'
    }, {
        top: '60%'
    }],
    series: [{
        type: 'line',
        showSymbol: false,
        data: valueList
    }, {
        type: 'line',
        showSymbol: false,
        data: valueList,
        xAxisIndex: 1,
        yAxisIndex: 1
    }]
};
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

/*当ping<1的时候,默认显示1*/
$.get("http://127.0.0.1:10003/getData.do",function(data,status){

    if(status == "success"){

        for(var key in data){
            $.each(data[key], function(index, content)
            {
                dateList.push(JSON.parse(content).dateList);
                valueList.push(JSON.parse(content).valueList ="0"?"1":JSON.parse(content).valueList);
            });
        }
        myChart.setOption(option, true);


    }
})
setInterval(function () {
    $.get("http://127.0.0.1:10003/getData.do",function(data,status){
        if(status == "success"){
            for(var key in data){
                $.each(data[key], function(index, content)
                {
                    dateList.push(JSON.parse(content).dateList);
                    dateList.shift();
                    valueList.push(JSON.parse(content).valueList ="0"?"1":JSON.parse(content).valueList);
                    valueList.shift();
                });
            }
            myChart.setOption(option, true);
        }
    })
},5000)
       </script>
   </body>
</html>